{% extends "base.html" %}
{% load static %}
{% block title %}观看记录{% endblock %}

{% block css %}<link rel="stylesheet" href="{% static 'css/search_watch.css' %}">{% endblock %}

{% block content %}

<div class="container">
    <!-- 任务栏 -->
    <div class="taskbar">
        <form class="form" method="get" action="{% url 'search_watch' %}"> 
            <!-- {% csrf_token %}     -->
            <span class="search">
                <input type="text" name="name" placeholder="请输入作品名称" value="{{ request.GET.name }}"> 
                <button type="submit"><img src="{% static 'img/搜索.png' %}" alt=""></button> 
            </span>
            <span class="view">
                <!-- <input type="text" name="type"  value=""> 
                <button type="submit"><img src="{% static 'img/搜索.png' %}" alt=""></button>  -->
                <button id="viewall" name="view_status" value="all" onclick="changeStatus()">全部</button> 
                <button id="viewing" name="view_status" value="ing" onclick="changeStatus()">在看</button> 
            </span>
            <span class="type">
                <button id="anime" name="type" value="anime" onclick="changeType()">动画</button> 
                <button id="movie" name="type" value="movie" onclick="changeType()">电影</button> 
                <button id="teleplay" name="type" value="teleplay" onclick="changeType()">电视剧</button> 
                <button id="novel" name="type" value="novel" onclick="changeType()">小说</button> 
            </span>
        </form> 
        
        <span class="link-add">
            <a href="/noinfo/add_watch/" target="update-iframe"><img src="{% static 'img/添加.png' %}" alt=""></a>
        </span>
    </div>
        
    <!-- 左侧查询结果页 -->
    <div class="table-text">
        {% if results %}  
        <table>
            <tr class="detail-head">
                <th>名称</th>
                <th>次数</th>
                <th>时间</th>
                <th>历经时长</th>
                <th>状态</th>
            </tr>
            {% for result in results %}
            <tr class="detail-text">
                <td class="td1"><a href="/noinfo/update_watch/?uid={{ result.id }}" target="update-iframe">{{ result.name | default_if_none:"" }}</a></td>
                <td class="td3">{{ result.times | default_if_none:"" }}</td>
                <td class="td2">
                    {% if result.date_watch_start == result.date_watch_end %}
                    {{ result.date_watch_start | default_if_none:"" | date:"Y年m月d日"}}
                    {% else %}
                    {{ result.date_watch_start | default_if_none:"" | date:"Y年m月d日"}}~{{ result.date_watch_end | default_if_none:"" | date:"Y年m月d日"}}
                    {% endif %}
                </td>
                <td class="td3">{{ result.duration | default_if_none:"" }}</td>
                <td class="td3">{{ result.status | default_if_none:"" }}</td>
            </tr>
            {% endfor %}
        </table>
        {% else %}  
        <p>未找到相关结果！</p> 
        {% endif %} 
    </div>

    <!-- 右侧详情页 -->
    <div class="form-info">
      <iframe src="http://127.0.0.1:8000/noinfo/add_watch" name="update-iframe" height="100%" width="100%" scrolling="no" frameborder="0"></iframe>
    </div>

</div>
    
<script>
// let typeValue = "";  
// let statusValue = "";

// 获取URL参数  
function getQueryParameter(name) {  
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");  
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),  
        results = regex.exec(location.search);  
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));  
} 

// function changeStatus() {  
//     statusValue = getQueryParameter(view_status); 
//     console.log(statusValue);
//     const currentUrl = window.location.href; 
//     const url = new URL(currentUrl);
//     const searchParams = new URLSearchParams(url.search); 
//     searchParams.append('type', typeValue); 
//     url.search = searchParams.toString(); 
//     window.location.href = url.toString();
// }
// function changeType() {  
//     typeValue = getQueryParameter(type); 
//     console.log(typeValue);
//     const currentUrl = window.location.href; 
//     const url = new URL(currentUrl);
//     const searchParams = new URLSearchParams(url.search); 
//     searchParams.append('view_status', statusValue  ); 
//     url.search = searchParams.toString(); 
//     window.location.href = url.toString();  
// }
 
// 根据参数改变CSS  
var view_status = getQueryParameter('view_status'); 
if (view_status === 'ing') {  
    var view = document.getElementById('viewing');
    view.style.borderBottom = '3px solid rgb(132, 124, 251)';
    view.style.fontWeight = 'bold'; 
} else {  
    var view = document.getElementById('viewall'); 
    view.style.borderBottom = '3px solid rgb(132, 124, 251)';
    view.style.fontWeight = 'bold';
}
var type = getQueryParameter('type');
if (type) {
    if (type === 'anime') {var ty = document.getElementById('anime');}
    else if (type === 'movie') {var ty = document.getElementById('movie');}
    else if (type === 'teleplay') {var ty = document.getElementById('teleplay');}
    else if (type === 'novel') {var ty = document.getElementById('novel');}
    ty.style.backgroundColor = 'rgb(132, 124, 251)';
    ty.style.color = '#fff';
    ty.style.fontWeight = 'bold';
    ty.style.borderRadius = '50%';
}

</script>

{% endblock %}